<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>orderList</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
      .tabs {
          margin-top: 3px;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 44px;
            background-color: white;
            overflow: auto;
        }

        .nav_one {
            display: flex;
            flex-shrink: 0;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            justify-content: center;
            align-items: center;
            background-color: white;
            height: 44px;
            line-height: 44px ;
        }

        .nav_zi {
            height: 44px;
            line-height: 44px ;
            padding: 7px 0;
            font-size: 14px;
            color: #999999;
            border-bottom: none;
        }

        .nav_zi_on {
            height: 44px;
            line-height: 44px ;
            color: #ff7037;
            border-bottom: 2px solid #ff7037;
        }

        .list_one {
            width: 100%;
            background: #ffffff;
            margin-top: 8px;
        }

        .top_box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 44px;
            padding: 0 15px;
            border-bottom: 1px solid #f8f8f8;
        }

        .top_text {
            font-size: 14px;
            color: #333333;
        }

        .bot-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 44px;
            padding: 0 15px;
        }

        .list_szi {
            font-size: 12px;
            color: #333333;
        }

        .list_rzi {
            font-size: 16px;
            color: #fe5c00;
        }
 

        .btn {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-left: 8px;
            border-radius: 2px;
            font-size: 14px;
            padding: 0 3px;
        }

        .btn-gray {
            background-color: white;
            border: 1px solid #b5b5b5;
            color: #999999;
        }

     
        .good-list {
            display: flex;
            flex-direction: column;
        }

        .order-goods-page {
            background-color: white;
        }

        .order-goods-item {
            display: flex;
            flex-direction: row;
            padding-bottom: 15px;
            margin: 15px 15px 0;
            border-bottom: 1px solid #f8f8f8;
        }

        .order-goods-img {
            width: 90px;
            height: 68px;
            margin-right: 12px;
            border-radius: 4px;
        }

        .order-goods-right {
            align-content: center;
            flex: 1;
        }

        .order-goods-title {
            font-size: 14px;
            color: #333333;
        }

        .order-goods-guige-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 5px;
        }

        .order-goods-guige,
        .order-goods-num {
            font-size: 12px;
            color: #999999;
        }

        .order-goods-bottom {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .order-goods-price {
            font-size: 14px;
            color: #fe904a;
        }

        .order-goods-btn {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-left: 8px;
            border-radius: 2px;
            font-size: 14px;
            padding: 0 3px;
        }

        .order-goods-btn-gray {
            background-color: white;
            border: 1px solid #b5b5b5;
            color: #999999;
        }

 
    </style>
</head>

<body>
    <div class="page"  @vue:mounted="mounted">
        <!-- 导航 -->
        <div class="nav-bar">
            <div onclick="core.back()" class="nav-bar-back">
                <span class="icon iconfont icon-fanhui m_r_10"></span>
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">我的订单</span>
        </div>
        <!-- tab切换 -->
        <div class="tabs">
            <div
            class="nav_one"
            @click="tabClick(index)" v-for="(item, index) in  data.orderTabList">
            <span class="nav_zi ${index == data.tabindex  ? 'nav_zi_on' : ''}">{{item.text}}</span>
        </div>


        </div>
        <!-- 订单列表 -->
        <div class="scroll-view-y">
            <div class="good-list">

                <div class="list_one" v-for="item of  data.orderList">
                    <div class="top_box">
                        <span class="top_text"> 订单编号：{{item.oid}}</span>
                        <span class="top_text">{{item.stat}}</span>
                    </div>
                    <div class="order-goods-page"> 
                       
                   <!--     var   buyn = 0;
                        var mm = 0 ;
                        item.data.list.forEach(( item2 , index2 ) =>{
                       -->
                          
                        <div class="order-goods-item" v-for="item2 of item.data.list ">
                            <img @click="onDetailClick()" class="order-goods-img" :src="item2.img" mode="aspectFill" />
                            <div class="order-goods-right">
                                <span class="order-goods-title">{{item2.title}}</span>
                                <div class="order-goods-guige-box">
                                    <span class="order-goods-guige">{{item2.buy_data_key ? ' ' + item2.buy_data_key : '默认规格'}}</span>
                                    <span class="order-goods-num">x{{item2.buynum}}</span>
                                </div>
                                <div class="order-goods-bottom">    
                                    <span class="order-goods-price">¥{{item2.price}}</span>
                                </div>
                            </div>
                        </div>
                     
                       <!-- mm+= item2.price* item2.buynum
                        buyn+= item2.buynum
                        })
                        -->
                        
                       
                    </div>
                    <div class="bot-box">
                        <span class="list_szi">共{{item.buyn|0}}件商品，合计:</span>
                        <span class="list_rzi">￥{{item.mm}}元</span>
                        <div class="flex1"></div>
                    
                      <span v-if="item.status == 1" class="btn btn-gray" @click="cancleOrder(1)">取消订单</span> 
                     <span  v-if="item.status == 1" class="btn btn-orange"   @click="onPayClick(  item )">立即付款</span> 
     
                     
                       <span   v-if="item.status == 3"   @click="shou(1)" class="btn btn-orange">确认收货</span> 
                    </div>
                </div>


            </div>
        </div>


    </div>
</body>

<script src="../script/api.js"></script>
<script src="../script/common.js"></script>


<script  type="module">
    import { createApp } from 'https://www.chenxiangle.com/app/web/script/pvue.js'
    const APP = ()=>{
        createApp({
        data:  { 
            title:"" ,
            content:"" ,
            tabindex:0,
            orderList:[],
            orderTabList : [{
        text: '全部',
        type: 0
    }, {
        text: '待付款',
        type: 1
    } , {
        text: '待收货',
        type: 4
    }, {
        text: '已完成',
        type: 5
    }]
        },
       
   
    async   getOrderListContent() {

        let str = '';
        var dt   = {tab: this.data.tabindex};
        core.log(dt);
        let  orderList = await core.post("app/getOrderV2",dt );
        core.log(orderList);

    orderList.forEach((item, index) => {
        
                var   buyn = 0;
                var mm = 0 ;
                        item.data.list.forEach(( item2 , index2 ) =>{
                        
                        
                        mm+= item2.price* item2.buynum
                        buyn+= item2.buynum
                })
                orderList[index].buyn = buyn ;
                orderList[index].mm = mm ;
    })
    this.data.orderList = orderList;
}
,    onPayClick(item  ){
        api.openWin({
            name: 'pay',
            url:'./other.html?action=pay&m=' + item.mm + "&id="+ item.id  +"&oid=" + item.oid 
        })
    },
      cancleOrder(param) {
        api.toast({
            msg: param==1?'取消未支付订单':'取消已支付订单',
            location: 'middle'
        })
    },    shou(n){
        api.toast({
            msg: "成功收货.",
            location: 'middle'
        })
    },   onDetailClick() {
        api.openWin({
            name: 'detail',
            url:'./detail.html'
        })
    },
    
    // 订单tab切换
      tabClick(index) {
         
        this.data.tabindex = index ;
        this.getOrderListContent()
    }
,
        mounted() {
            core.log(api.pageParam);
            if (api.pageParam.index) {
                this.data.tabindex = api.pageParam.index;
                    this.tabClick(api.pageParam.index)
              }
             this.getOrderListContent()
        }
      }).mount( )
    }

    window.apiready = ()=> {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
    }
</script>


<script>
  
    

    // 我的订单Tab切换
   
 
    

   



  
   
  

</script>

</html>